import Vue from 'vue'
import VueRouter from 'vue-router'

import MyDiscover from '@/views/MyDiscover'
import MyMine from '@/views/MyMine'
import MyFriend from '@/views/MyFriend'
import NotFound from '@/views/NotFound'

// 导入子路由的组件
import TuiJian from '@/views/TuiJian'
import PaiHangBang from '@/views/PaiHangBang'
import GeDan from '@/views/GeDan'

Vue.use(VueRouter)

const routes = [
  // 路径上什么都不输入，就是跳转到/discover
  // 什么都不输可以写/也可以写空字符串
  { path: '/', redirect: '/discover' },
  {
    name: 'dis',
    path: '/discover',
    component: MyDiscover,
    // 子路由
    children: [
      // 子路由的路径一般可以不加/
      // 不加`/`代表访问时要拼接父路由的路径
      // 加`/`就是不用拼接，直接在路径上访问
      // 具体加不加是看需求的
      { name: 'tj', path: 'tuijian', component: TuiJian },
      { name: 'phb', path: 'toplist', component: PaiHangBang },
      { name: 'pl', path: 'playlist', component: GeDan },
    ]
  },
  {
    name: 'my',
    path: '/my',
    component: MyMine
  },
  {
    name: 'friend',
    path: '/friend',
    component: MyFriend
  },

  {
    name: 'notFound',
    // 这里的所有是指除了上面以外的所有路径
    // 所以404的规则一般写到最后面
    path: '*',
    component: NotFound
  },
]

const router = new VueRouter({
  routes
})

export default router
